import React from 'react';
import { Tooltip, Popover } from 'antd';
import { storyStatus } from '@/utils/data';
import { useRouter } from 'next/router';
import Project from '../project';

const StoryCard = (props) => {
  const router = useRouter();
  const { status, name, submit_test_time, online_time, relation_projects = [], id } = props;
  const popContent = relation_projects.length ? <Project relationProjects={relation_projects} /> : '暂无';
  return (
    <Popover
      placement="bottom"
      title={
        <div className="project-count-box">
          关联<span className="project-count">{relation_projects.length}</span>个项目
        </div>
      }
      content={popContent}
      overlayClassName="project-pop"
    >
      <div className="story-card">
        {/* <Tooltip title={name}> */}
        <div
          className="story-name"
          onClick={() => {
            router.push(`/storyManage/edit/${id as string}`);
          }}
        >
          {name}
        </div>
        {/* </Tooltip> */}
        <div className="story-time">提测时间：{submit_test_time}</div>
        <div className="story-time">上线时间：{online_time}</div>
        <div>
          <span className="story-project-text">关联项目：</span>
          <span className="story-count">{relation_projects.length}</span>
        </div>
        {/* {popContent} */}
        <div className={`${String(status)} story-status`}>{storyStatus[status]}</div>
      </div>
    </Popover>
  );
};

export default StoryCard;
